<template>
<div>
  <el-avatar :size="40" :src="avatar" @error="errorHandler" style="margin-top: 0.6rem; margin-right: 0.6rem">
<!--    <img src="../../assets/img.gif"/>-->
  </el-avatar>
  <el-dropdown style="bottom: 1rem">
            <span class="el-dropdown-link" style="color: #fff">
          {{userInfo.username}}
              <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item>
        <router-link to="/">首页</router-link>
      </el-dropdown-item>
      <el-dropdown-item>
        <router-link to="/info/index">个人信息</router-link>
      </el-dropdown-item>
      <el-dropdown-item @click.native="loginout"
                        divided>退出系统
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</div>
</template>

<script>
    import Cookies from "js-cookie"
    import {mapGetters} from 'vuex'

    export default {
        name: "headerInfo",
      data() {
          return {
            avatar: ''
          }
      },

      computed: {
        ...mapGetters([
          "userInfo"
        ])
      },
      methods: {
        // 退出登录
        loginout() {
          this.$confirm("是否退出系统，是否继续？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            // 执行退出方法，并跳转路由
            this.$store.commit('SET_USER_INFO', {})
            this.$store.commit('SET_ROLES', [])
            this.$store.commit('SET_PERMISSIONS', [])
            this.$store.commit('clearActiveTab')
            this.$store.commit('clearOpenedTab')
            this.$store.commit('clearNavTree')
            window.sessionStorage.clear()
            window.localStorage.clear()
            sessionStorage.clear()
            localStorage.clear()
            Cookies.set('token', null)
            this.$router.push('/login')
          })
        },
        // 头像加载失败
        errorHandler() {
          return true
        }
      },
      created() {
          this.avatar = 'http://182.92.235.211:8080/' + this.userInfo.avatar
      }
    }
</script>

<style lang="scss" scoped>

</style>
